<template>
  <div class="resolution">
    <!-- 1#回转式格栅除污机页面 -->
    <!-- 顶部及左右图片 -->
    <div class="headerContainer">
      <img src="@/assets/dxq/header.png" alt="" />
    </div>
    <!-- 左部 -->
    <div class="leftContainer">
      <img src="@/assets/dxq/left.png" alt="" class="resolution-left" />
      <div class="left-content">
        <img src="@/assets/dxq/psjsj.png" alt="" class="psjsj-img" />
        <img src="@/assets/dxq/zssj.png" alt="" class="zssj-img" />
        <div class="left-content-icon">
          <!-- 第一个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">3#出水管手动蝶阀</span>
                <!-- <span class="p1-sp2">m</span> -->
              </p>
              <p class="p2">设备名称</p>
            </div>
          </div>
          <!-- 第二个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">4.68</span>
                <span class="p1-sp2">NTU</span>
              </p>
              <p class="p2">原水浊度</p>
            </div>
          </div>
          <!-- 第三个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">8.8</span>
                <!-- <span class="p1-sp2"></span> -->
              </p>
              <p class="p2">原水PH值</p>
            </div>
          </div>
          <!-- 第四个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">0</span>
                <span class="p1-sp2">mg/L</span>
              </p>
              <p class="p2">原水总氮</p>
            </div>
          </div>
          <!-- 第五个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">3</span>
                <span class="p1-sp2">mg/L</span>
              </p>
              <p class="p2">原水cod值</p>
            </div>
          </div>
          <!-- 第六个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">0</span>
                <span class="p1-sp2">mg/L</span>
              </p>
              <p class="p2">氨氮</p>
            </div>
          </div>
          <!-- 第七个 -->
          <div class="item">
            <img src="@/assets/dxq/tb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">1.00</span>
                <span class="p1-sp2">m</span>
              </p>
              <p class="p2">回转式格栅除污机的运行状态</p>
            </div>
          </div>
        </div>
        <div class="gyjjContainer">
          <img src="@/assets/dxq/gyjj.png" alt="" class="gyjjContainer-hea-img" />
          <p class="p1">
            配水井是水库输水管线与净配水厂的连接构筑物，它的主要作用是稳定净水构筑物流量负荷分配，提高净水效率。
            配水井设计规模为20.0万m3/d。设计堰前水位高程1170.0m。 配水井配备主要设备如下:
            1、2台回转式格栅(格栅宽B=2m，栅间距5mm，N=2.2kW): 2、1台无轴螺旋输送机 (
            L=9.35m，N=4kW )。 配有视频监控摄像头1个，24小时监控，
            另外有专人定期巡回检查。 主要危险有害因素:触电、机械伤人、跌入池中溺水伤亡等。
          </p>
          <div class="gyjjContainerImg">
            <img src="@/assets/dxq/gyjj1.png" alt="" class="gyjjContainer-con-img" />
            <img src="@/assets/dxq/gyjj1.png" alt="" class="gyjjContainer-con-img" />
          </div>
        </div>
      </div>
    </div>
    <!-- 右部 -->
    <div class="rigtContainer">
      <img src="@/assets/dxq/right.png" alt="" class="resolution-right" />
      <div class="right-content">
        <div class="image-container">
          <img src="@/assets/dxq/hzs.png" alt="" class="hzs-img" />
          <p>1#回转式格栅除污机</p>
        </div>
        <img src="@/assets/dxq/zssj.png" alt="" class="zssj-img" />
        <div class="right-content-icon">
          <!-- 第一个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">1.00</span>
                <span class="p1-sp2">m</span>
              </p>
              <p class="p2">格栅前后液位差</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.resolution {
  //   width: 1000px;
  //   height: 480px;
  width: 100%;
  aspect-ratio: 1000 / 480; /* 宽高比-实现自适应 */
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

// 顶部及左右图片
.headerContainer {
  width: 875px;
  height: 25px;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%); /* 居中显示 */
}
.headerContainer img {
  width: 100%;
  height: 100%;
}
.leftContainer,
.rigtContainer,
.headerContainer {
  position: absolute;
  overflow: hidden;
}
.resolution-left,
.resolution-right {
  width: 181px;
  height: 100%;
}
// 左边内容
.leftContainer {
  top: 0;
  left: 0;
  width: 181px;
  height: 100%;
}
.left-content {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 8px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
}
.psjsj-img {
  width: 132px;
  height: 14px;
}
.zssj-img {
  margin-top: 3px;
  width: 53px;
  height: 8px;
  //   height: auto;
  //   max-height: 11px;
}
// 图标和数据
.left-content-icon {
  margin-top: 10px;
}
.right-content-icon {
  margin-top: 7px;
}
.left-content-icon,
.right-content-icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 从行的开始位置对齐 */
  align-items: flex-start;
  // 选择奇数的.item元素
  .right-content-icon .item:nth-child(odd) {
    margin-left: 0px;
  }
  // 选择偶数的.item元素
  .right-content-icon .item:nth-child(even) {
    margin-left: 18px;
  }
  .item {
    display: flex;
    margin-bottom: 7px; /* 每个.item的底部外边距 */
    width: 50%; /* 每个.item占据50%的宽度，从而每行两个 */
    height: 14px;
    .text {
      display: flex;
      flex-direction: column;
      margin-left: 5px;
      .p1 {
        display: flex;
        .p1-sp1 {
          font-family: D-DIN, D-DIN;
          font-weight: bold;
          font-size: 5px;
          color: #ffffff;
          line-height: 8px;
          text-align: left;
          font-style: normal;
          margin-right: 1px;
        }
        .p1-sp2 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 4px;
          color: #d2d2d2;
          line-height: 8px;
          text-align: left;
          font-style: normal;
        }
      }
      .p2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 4px;
        color: #ffffff;
        line-height: 8px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
.left-content-icon img {
  width: 17px;
  height: 13px;
}
.gyjjContainer {
  .gyjjContainer-hea-img {
    width: 53px;
    height: 8px;
    margin-top: 16px;
  }
  .p1 {
    text-indent: 2em; /* 段落首行缩进两个字符宽度 */
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 4px;
    color: #ffffff;
    line-height: 7px;
    letter-spacing: 0px;
    text-align: justify;
    font-style: normal;
  }
  .gyjjContainer-con-img {
    width: 77px;
    height: 47px;
    margin-right: 10px;
  }
  .gyjjContainerImg {
    margin-top: 10px;
    display: flex;
  }
}

// 右边
.rigtContainer {
  top: 0;
  right: 0;
  width: 181px;
  height: 100%;
}
.right-content {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 13px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
}
.image-container {
  position: relative;
  width: 139px;
  height: 14px;
  img {
    width: 100%;
    height: 100%;
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
  }
  p {
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 11px;
    font-family: OPPOSans, OPPOSans;
    font-weight: normal;
    font-size: 8px;
    color: #ffffff;
    line-height: 10px;
    text-align: left;
    font-style: normal;
  }
}
</style>
